import { useState } from 'react'
import { useParams } from 'react-router-dom'
import { Download, Share2, Edit, Trash2, Eye, Calendar, User, Tag, FileText } from 'lucide-react'
import './ResourceDetails.css'

const ResourceDetails = () => {
  const { id } = useParams()
  const [activeTab, setActiveTab] = useState('details')

  // Sample resource data
  const resource = {
    id: id,
    title: '智汇宝系统架构文档',
    description: '这是一个详细的系统架构文档，包含了智汇宝平台的完整技术架构设计和实现方案。',
    type: '文档',
    size: '2.5 MB',
    format: 'PDF',
    createdAt: '2024-01-15',
    updatedAt: '2024-01-20',
    author: '张三',
    tags: ['架构', '技术文档', '系统设计'],
    downloads: 156,
    views: 1234,
    thumbnail: 'https://via.placeholder.com/300x200/667eea/ffffff?text=Document'
  }

  const tabs = [
    { id: 'details', label: '详细信息', icon: FileText },
    { id: 'preview', label: '预览', icon: Eye },
    { id: 'history', label: '历史记录', icon: Calendar }
  ]

  return (
    <div className="resource-details">
      <div className="resource-header">
        <div className="resource-info">
          <h1>{resource.title}</h1>
          <p>{resource.description}</p>
          <div className="resource-meta">
            <span className="meta-item">
              <User size={16} />
              {resource.author}
            </span>
            <span className="meta-item">
              <Calendar size={16} />
              {resource.createdAt}
            </span>
            <span className="meta-item">
              <Eye size={16} />
              {resource.views} 次查看
            </span>
            <span className="meta-item">
              <Download size={16} />
              {resource.downloads} 次下载
            </span>
          </div>
        </div>
        <div className="resource-actions">
          <button className="action-btn primary">
            <Download size={20} />
            下载
          </button>
          <button className="action-btn">
            <Share2 size={20} />
            分享
          </button>
          <button className="action-btn">
            <Edit size={20} />
            编辑
          </button>
          <button className="action-btn danger">
            <Trash2 size={20} />
            删除
          </button>
        </div>
      </div>

      <div className="resource-content">
        <div className="resource-sidebar">
          <div className="resource-thumbnail">
            <img src={resource.thumbnail} alt={resource.title} />
          </div>
          <div className="resource-properties">
            <h3>属性</h3>
            <div className="property-item">
              <span className="property-label">类型:</span>
              <span className="property-value">{resource.type}</span>
            </div>
            <div className="property-item">
              <span className="property-label">大小:</span>
              <span className="property-value">{resource.size}</span>
            </div>
            <div className="property-item">
              <span className="property-label">格式:</span>
              <span className="property-value">{resource.format}</span>
            </div>
            <div className="property-item">
              <span className="property-label">创建时间:</span>
              <span className="property-value">{resource.createdAt}</span>
            </div>
            <div className="property-item">
              <span className="property-label">更新时间:</span>
              <span className="property-value">{resource.updatedAt}</span>
            </div>
          </div>
          <div className="resource-tags">
            <h3>标签</h3>
            <div className="tags-list">
              {resource.tags.map((tag, index) => (
                <span key={index} className="tag">
                  <Tag size={14} />
                  {tag}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div className="resource-main">
          <div className="tabs">
            {tabs.map((tab) => {
              const Icon = tab.icon
              return (
                <button
                  key={tab.id}
                  className={`tab ${activeTab === tab.id ? 'active' : ''}`}
                  onClick={() => setActiveTab(tab.id)}
                >
                  <Icon size={18} />
                  {tab.label}
                </button>
              )
            })}
          </div>

          <div className="tab-content">
            {activeTab === 'details' && (
              <div className="details-content">
                <h3>详细描述</h3>
                <p>{resource.description}</p>
                <p>这个文档包含了智汇宝平台的完整技术架构，涵盖了前端、后端、数据库设计以及部署方案。文档详细说明了系统的各个模块之间的关系，以及数据流向和处理逻辑。</p>
                <h4>主要内容包括：</h4>
                <ul>
                  <li>系统整体架构设计</li>
                  <li>前端技术栈选择与实现</li>
                  <li>后端API设计规范</li>
                  <li>数据库设计与优化</li>
                  <li>安全性考虑与实现</li>
                  <li>性能优化策略</li>
                  <li>部署与运维方案</li>
                </ul>
              </div>
            )}

            {activeTab === 'preview' && (
              <div className="preview-content">
                <div className="preview-placeholder">
                  <FileText size={64} />
                  <h3>文档预览</h3>
                  <p>点击下载按钮查看完整文档内容</p>
                </div>
              </div>
            )}

            {activeTab === 'history' && (
              <div className="history-content">
                <h3>版本历史</h3>
                <div className="history-list">
                  <div className="history-item">
                    <div className="history-date">2024-01-20</div>
                    <div className="history-action">更新了第三章节内容</div>
                    <div className="history-author">张三</div>
                  </div>
                  <div className="history-item">
                    <div className="history-date">2024-01-18</div>
                    <div className="history-action">添加了安全性章节</div>
                    <div className="history-author">李四</div>
                  </div>
                  <div className="history-item">
                    <div className="history-date">2024-01-15</div>
                    <div className="history-action">创建文档</div>
                    <div className="history-author">张三</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ResourceDetails
